<template>
    <div class="NowFoodMessageBG">
        <div class="FoodMessageTittle">
            <div>
                <el-input v-model="CheckMess" clearable :prefix-icon="Search" class="el_input" placeholder="请输入要查询的关键字">
                </el-input>
                <el-select class="el_select" v-model="selectValue" placeholder="请选择查询字段" size="large"
                    style="width: 240px">
                    <el-option v-for="(key, value) in checkDct" :key="key" :label="value" :value="key" />
                </el-select>
            </div>
            <el-button @click="DialogFlag = true" type="primary" class="el_button_primary" :icon="Plus">查询食品</el-button>
        </div>
        <div class="FoodMessageBorder">
            <el-table @sort-change="changeSort" class="FoodMessageTable el_table" stripe :data="sortData">
                <el-table-column sortable="custom" prop="number" align="center" label="溯源码" />
                <el-table-column sortable="custom" prop="name" align="center" label="食品名称" />
                <el-table-column sortable="custom" prop="current" align="center" label="持有者" />
                <el-table-column sortable="custom" prop="address" align="center" label="持有者地址" />
                <el-table-column sortable="custom" prop="produce" align="center" label="生产商" />
                <el-table-column sortable="custom" prop="timestamp" align="center" label="入库时间" />
                <el-table-column sortable="custom" prop="quality" align="center" label="质检状况" />
                <el-table-column align="center" fixed="right" label="删除查询记录">
                    <template #default="scope">
                        <el-button :icon="Delete" circle @click="delData(scope.row)" class="el_button_danger" type="danger">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog @close="dialogClose" class="NowFoodMessageDialog el_dialog" v-model="DialogFlag" align-center
        width="300">
        <template #header>
            <p class="NowFoodMessageDialogTittle">获取某个食品的当前信息</p>
        </template>
        <div class="NowFoodMessageDialogCont">
            <el-input v-model="addInput" type="number" class="el_input" :prefix-icon="Search"
                placeholder="请输入要查询的溯源码"></el-input>
            <div>
                <el-button @click="dialogClose" type="danger" class="el_button_danger">取消</el-button>
                <el-button @click="dialogEnsure" type="primary" class="el_button_primary">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang='js' name=''>
import { CheckInput } from '@/utils/checkUserInput';
import strToTime from '@/utils/strToTime';
import showMessage from '@/utils/showMessage';
import { Search, Plus, Delete } from '@element-plus/icons-vue'
import getNowFoodMessageAPI from '@/api/main/FoodMessage/getNowFoodMessage';
import { ref, computed } from 'vue'

const DialogFlag = ref(true)
const FoodDataList = ref([])
const addInput = ref("")

const CheckMess = ref("")
const selectValue = ref("number")
const checkDct = ref({
    溯源码: "number",
    食品名称: "name",
    持有者: "current",
    持有者地址: "address",
    生产商: "produce",
    入库时间: "timestamp",
    质检状况: "quality"
})

const sortRule = ref("")
const sortName = ref("")

const ShowData = computed(() => {
    let vardata = ref(JSON.parse(JSON.stringify(FoodDataList.value)))
    vardata.value.forEach(element => {
        element["quality"] = element["quality"] == 1 ? "优质" : element["quality"] == 2 ? "合格" : "不合格"
        element["produce_time"] = strToTime(parseInt(element["produce_time"]))
        element["timestamp"] = strToTime(parseInt(element["timestamp"]), "Ciallo")
    });
    return vardata.value
})
const CheckData = computed(() => {
    let vardata = ref([])
    ShowData.value.forEach(element => {
        if (element[selectValue.value] != undefined) {
            const goal = String(element[selectValue.value]);
            if (goal.includes(CheckMess.value)) {
                vardata.value.push(element)
            }
        }
    });
    return vardata.value
})
const sortData = computed(() => {
    if (CheckData.value) {
        // console.log(sortName.value)
        if (sortRule.value == 1) {
            return CheckData.value.toSorted((a, b) => {
                const valA = a[sortName.value] ?? '';
                const valB = b[sortName.value] ?? '';
                if (valA < valB) return -1;
                if (valA > valB) return 1;
                return 0;
            })
        } else if (sortRule.value == 2) {
            return CheckData.value.toSorted((a, b) => {
                const valA = a[sortName.value] ?? '';
                const valB = b[sortName.value] ?? '';
                if (valA < valB) return 1;
                if (valA > valB) return -1;
                return 0;
            })
        } else {
            return CheckData.value
        }
    } else { return null }
})
// dialog确定
function dialogEnsure() {
    if (CheckInput(addInput.value, "请输入要查询的溯源码")) {
        getNowFoodMessage(addInput.value)
    }
}
// dialog取消
function dialogClose() {
    DialogFlag.value = false
    addInput.value = ""
}

// 排序函数
function changeSort(e) {
    switch (e.order) {
        case "ascending": sortRule.value = 1; break;
        case "descending": sortRule.value = 2; break;
        default: sortRule.value = null; break;
    }
    if (e.order) {
        sortName.value = e.prop
    } else {
        sortName.value = null
    }
}
// 查询溯源码
async function getNowFoodMessage(num) {
    const Flag = FoodDataList.value.findIndex((item) => {
        return item.number == num
    })
    if (Flag==-1) {
        const res = await getNowFoodMessageAPI(num)
        try{
        if (res.data) {
            res.data.number = num
            FoodDataList.value.unshift(res.data)
            console.log(res.data)
            showMessage("添加成功", "success")
            dialogClose()
        }}catch{
            showMessage("查询失败,请确认该溯源码存在")
        }
    }else{
        showMessage("该商品已存在")
    }
}

function delData(e) {
    const Flag = FoodDataList.value.findIndex((item) => {
        return item.number == e.number
    })
    if (Flag != -1) {
        FoodDataList.value.splice(Flag, 1);
    }
}
</script>

<style scoped>
/* 框架 */
.NowFoodMessageBG {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 标题 */
.FoodMessageTittle {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 50px;
}

.FoodMessageTittle>*:nth-child(1) {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.NowFoodMessageDialogTittle {
    font-size: 16px;
    transition: all 0.5s;
    font-weight: bold;
    text-align: center;
    color: var(--PfoodMessage_Tittle);
}

.NowFoodMessageDialogCont {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.NowFoodMessageDialogCont>div {
    display: flex;
    flex-direction: row;

}

.NowFoodMessageDialogCont>div>* {
    flex: 1;
}
</style>
<style>
.NowFoodMessageDialogCont input::-webkit-outer-spin-button,
.NowFoodMessageDialogCont input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
</style>